<!-- @format -->
<template>
  <div>
    <!-- 按钮 -->
    <button @click="cpName = 'MyLeft'">李沁</button>
    <button @click="cpName = 'MyRight'">宋轶</button>
    <!-- 内容 -->
    <div
      class="main"
      style="display: flex">
      <!-- 添加flex样式的目的是为了让下面两个组件水平排列 -->
      <!-- 1. 动态组件的使用，绑定 is 属性 -->
      <!-- <component :is="cpName" /> -->
      <!-- 2. 动态组件的原理：借助v-if指令做条件渲染 -->
      <my-left v-if="cpName === 'MyLeft'" />
      <my-right v-else />
    </div>
  </div>
</template>

<script>
  import MyLeft from './components/MyLeft.vue'
  import MyRight from './components/MyRight.vue'
  export default {
    components: {
      MyLeft,
      MyRight
    },
    data() {
      return {
        cpName: 'MyLeft'
      }
    }
  }
</script>

<style></style>
